<script setup lang="ts">
import { ref, reactive } from "vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import { getCountByCountry } from "@/api";
import { ElMessage } from "element-plus";

const config = ref({
  showValue: true,
  unit: "次",
});
interface DataItem {
  value: number;
  name: string;
}
const data = ref<DataItem[]>([]);

const getData = () => {


  getCountByCountry().then((res) => {
    console.log("转换前的数据:", res);
    if (res.code === 200) {
      // 转换数据格式
      const formattedData = {
        value: Object.entries(res.data || {})
          .map(([name, value]) => ({
            value: Number(value) || 0,
            name
          }))
          .sort((a, b) => b.value - a.value) // 按value降序排序
      };
      data.value= formattedData.value
      console.log("转换后的数据:", formattedData);

    } else {
      ElMessage.error(res.msg);
    }
  }).catch(err => {
    ElMessage.error(err.message || "请求失败");
  });
};
getData();
</script>

<template>
  <div class="right_bottom">
    <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
}
</style>
